<template>
	<div class="home">
		<div class="main clear">
			<div class="left">
				<div class="title">
					<span class="type">专题</span>
					<span class="span-title">{{ name }}</span>
					<span class="btn-follow" v-if="store!=1" @click="followFn">+订阅</span>
					<span class="followed" v-else><i class="icon icon-followed"></i>已订阅</span>
				</div>
				<list v-on:child-say="listenToMyBoy"></list>
			</div>
			<div class="right">
				<ad-squa></ad-squa>
				<recommend></recommend>
				<topic></topic>
			</div>
		</div>
		
	</div>
</template>

<script>
import list from '@/components/list'
import recommend from '@/components/recommend'
import topic from '@/components/topic'
import adRect from '@/components/ad/rect'
import adSqua from '@/components/ad/squa'
import { subscriptionAdd } from '@/api'
import { utilStore, utilGood, utilFollow } from '@/util/util'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			name: null,
			obj_id: null,
			store: 0,
		}
	},
    components: { 
		list, 
		recommend, 
		topic,
		adRect, 
		adSqua
	},
	computed: {
		...mapState([
			'userInfo',
			'login'
		]),
	},
	methods: {
		...mapMutations([
			'DIALOG_LOGIN',
		]),
		listenToMyBoy: function (somedata){
			this.name = somedata.subject_name;
			this.store = somedata.store;
		},
		// 订阅
		followFn(){
			if(this.login){
				let para = {
					obj_id: this.obj_id,
					type: 1,
					title: this.name,
					user_id: this.userInfo.user_id
				}
				subscriptionAdd(para).then( res => {
					if(res.data){
						this.folloed = true;
					}else{
						if(res.tologin){
							this.DIALOG_LOGIN();
						}else {
							if(res.msg === '您已经订阅过'){
								this.store = 1;
							}
							this.$message.warning(res.msg);
						}
					}
				})
			}else{
				this.DIALOG_LOGIN();
			}
		},
	},
	mounted() {
		this.obj_id = this.$route.params.subject_id;
	}
}
</script>

<style scoped lang="scss">
.main {
	.left {
		width: 895px;
		.title {
			background: #fff;
			text-align: center;
			font-size: 18px;
			line-height: 25px;
			height: 65px;
			font-weight:bold;
			padding: 20px;
			.type {
				color: #f86254;
				float: left;
			}
			.span-title {
				padding-right: 15px;
			}
			margin-bottom: 20px;
		}
	}
	.right {
		width: 285px;
	}
}
</style>